<template>
  <div class="home-banner">
    <XtxCarousel :sliders="list" />
  </div>
</template>
<script>
import { homeBanner } from "@/api/home";
import { ref } from "vue";
export default {
  name: "HomeBanner",
  setup() {
    const list = ref([]);
    homeBanner().then((res) => {
      list.value = res.result;
      console.log("轮播图", res);
    });

    return { list };
  },
};
</script>
<style scoped lang="less">
// scoped:只管当前组件与子组件最外层，可以看到的都可以管到s
.home-banner {
  width: 1240px;
  height: 500px;
  position: absolute;
  left: 0;
  top: 0;
  z-index: 98;
  // ::v-deep .prev {   //vue 2.0的写法
  //   left: 270px;
  // }

  :deep(.prev) {
    //vue 3.0支持的穿透写法
    left: 270px !important;
  }
}
</style>
